<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>PACP Database Viewer</title>
        <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="lib/dlz/css/MultiSelect.css" />
		<link rel="stylesheet" type="text/css" href="lib/dlz/resources/css/dlz.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="lib/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/TabCloseMenu.js">
        </script>
        <script type="text/javascript" src="lib/ext/ux/SearchField.js">
        </script>
        <!--<script type="text/javascript" src="lib/pacp/pacp.js">
        </script>-->
        <script type="text/javascript" src="lib/jwplayer/swfobject.js">
        </script>
        <!--
        <script src="http://openlayers.org/api/2.8/OpenLayers.js">
        </script>
        <script type="text/javascript" src="lib/GeoExt/script/GeoExt.js">
        </script>
        -->
        <script type="text/javascript" src="lib/dlz/form/MultiSelect.js">
        </script>
        <script type="text/javascript" src="lib/dlz/form/ItemSelector.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.multipleselect.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.listeditor.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.attributebuilder.js">
        </script>
		<script type="text/javascript" src="lib/pacp/pacp.defectbuilder.js">
        </script>
        <script type="text/javascript" src="lib/pacp/pacp.selectwindow.js">
        </script>
        <link rel="stylesheet" type="text/css" href="combos.css" />
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            
            Ext.onReady(function(){
            
                //                single_select.show();
                var atlas_select = new pacp.selectwindow({
					title: 'Select Atlas Maps',
					hideHeaders: true,
                    store: new Ext.data.JsonStore({
                        url: 'atlas_list.js',
                        root: 'data',
                        fields: ['text', 'value']
                    }),
                    columns: [{
                        header: 'text',
                        width: .5,
                        dataIndex: 'text'
                    }],
                    singleSelect: false,

                    selectorLable: 'Atlas'
                });
                atlas_select.on('submitselection', function(data){
                    Ext.each(data, function(r, index){
						atlas_map_list.store.add(new Ext.data.Record({value: 'map = ' + r[0]}))
					})
                });
                
                var att_builder = new pacp.attributebuilder();
				 var att_builder2 = new pacp.attributebuilder();
                
                
                var columns = [{
                    header: 'value',
                    
                    dataIndex: 'value'
                }];
                
                var ds = new Ext.data.ArrayStore({
                    data: [],
                    fields: ['value'],
                    sortInfo: {
                        field: 'value',
                        direction: 'ASC'
                    }
                });
                
                //				[['0150'], ['0151'], ['152']]
                var atlas_map_list = new pacp.listeditor({
                    hideHeaders: true,
                    columns: columns,
                    store: ds,
                    //					height: 200,
                    listLabel: '.    in <b>Atlas Maps</b>: ',
                    listTitle: '',
                    collapsible: false,
                    onEdit: function(){
						atlas_select.isForm.clearSelections();
                        atlas_select.show()
                    }
                });
                var property_list = new pacp.listeditor({
                    hideHeaders: true,
                    columns: columns,
                    store: new Ext.data.ArrayStore({
                        data: [],
                        fields: ['value'],
                        sortInfo: {
                            field: 'value',
                            direction: 'ASC'
                        }
                    }),
                    //					height: 200,
                    listLabel: '.    with <b>ALL</b> of the following <b>attributes</b> (eg. A pipe that is 15" diameter and 200ft long.): ',
                    listTitle: '',
                    collapsible: false,
                    onEdit: function(){
                        att_builder.show()
                    }
                });
				att_builder.on('submitselection', function(value){
					
					
					property_list.store.add(new Ext.data.Record({value:value}))
				})
				var property_any_list = new pacp.listeditor({
                    hideHeaders: true,
					
                    columns: columns,					
					store: new Ext.data.ArrayStore({
                        data: [],
                        fields: ['value'],
                        sortInfo: {
                            field: 'value',
                            direction: 'ASC'
                        }
                    }),
                    //					height: 200,
                    listLabel: '.    with <b>ANY</b> of the following <b>attributes</b>(eg. 15" diamter pipes and 24" diameter pipes.): ',
                    listTitle: '',
                    collapsible: false,
                    onEdit: function(){
                        att_builder2.show()
                    }
                });
				att_builder2.on('submitselection', function(value){
					property_any_list.store.add(new Ext.data.Record({value:value}))
				})
				
				defect_builder = new pacp.defectbuilder();
                var defect_list = new pacp.listeditor({
                    hideHeaders: true,
//                    height: 200,
                    //					listHeight: 200,
                    columns: columns,					
					store: new Ext.data.ArrayStore({
                        data: [],
                        fields: ['value'],
                        sortInfo: {
                            field: 'value',
                            direction: 'ASC'
                        }
                    }),
                    //					height: 200,
                    listLabel: '.    with <b>ALL</b> of the following <b>defects</b>(eg. A pipe with both a RFJ and a RMJ): ',
                    listTitle: '',
                    collapsible: false,
                    onEdit: function(){
                        defect_builder.show()
                    }
                });
				defect_builder.on('submitselection', function(value){
					defect_list.store.add(new Ext.data.Record({value:value}))
				})
				defect_builder2 = new pacp.defectbuilder();
                var defect_any_list = new pacp.listeditor({
                    hideHeaders: true,
//                    height: 200,
                    //					listHeight: 200,
                    columns: columns,					
					store: new Ext.data.ArrayStore({
                        data: [],
                        fields: ['value'],
                        sortInfo: {
                            field: 'value',
                            direction: 'ASC'
                        }
                    }),
                    //					height: 200,
                    listLabel: '.    with <b>ANY</b> of the following <b>defects</b>(eg. A pipe with either a RFJ or a RMJ or both): ',
                    listTitle: '',
                    collapsible: false,
                    onEdit: function(){
                        defect_builder2.show()
                    }
                });
				
				defect_builder2.on('submitselection', function(value){
					defect_any_list.store.add(new Ext.data.Record({value:value}))
				});
                
                
                var panel = new Ext.Window({
                    modal: true,
                    title: 'Find Pipes....',
                    bodyStyle: 'padding: 2px',
                    width: 800,
                    height: 600,
                    //					layout: 'fit',
                    autoScroll: true,
                    items: [atlas_map_list, property_list, property_any_list, defect_list, defect_any_list],
                    buttons: [{
                        text: 'Search',
						iconCls: 'find-icon',
						handler: function(){
							var values =['Find pipes that meet the following rules:'];
							if (atlas_map_list.store.getCount()>0) {
								values.push('Include pipes in the maps:')
							}
							atlas_map_list.store.each(function(r){values.push(r.get('value'))});
							if (property_list.store.getCount()>0) {
								values.push('include pipes with ALL of the attributes:')
							}
							property_list.store.each(function(r){values.push(r.get('value'))});
							if (property_any_list.store.getCount()>0) {
								values.push('include pipes with ANY of the attributes:')
							}
							property_any_list.store.each(function(r){values.push(r.get('value'))});
							defect_list.store.each(function(r){values.push(r.get('value'))});
							panel.hide();
							var text = '';
							Ext.each(values, function(r, idx){
								text = text + r + '<br>';
							})
							var w = new Ext.Window({
								title: 'Search Criteria',
								html: text,
								width: 500,
								layout: 'fit'
							});
							w.show();
						}
                    }]
                });
                
                // le.loadData([['0150'], ['0151'], ['152']]);
                //panel.render(document.body);
                
				var startButton = new Ext.Button({
					text: 'Test',
					handler: function(){
						panel.show();
                		atlas_map_list.store.removeAll();
						property_list.store.removeAll();
						property_any_list.store.removeAll();
						defect_list.store.removeAll();		
					}
				})
				
				startButton.render(document.body)
                
            })
        </script>
        <style type="text/css">
            #search-results a {
                color: #385F95;
                font: bold 11px tahoma, arial, helvetica, sans-serif;
                text-decoration: none;
            }
            
            #search-results a:hover {
                text-decoration: underline;
            }
            
            #search-results .search-item {
                padding: 5px;
            }
            
            #search-results p {
                margin: 3px !important;
            }
            
            #search-results {
                border-bottom: 1px solid #ddd;
                margin: 0 1px;
                height: 300px;
                overflow: auto;
            }
            
            #search-results .x-toolbar {
                border: 0 none;
            }
            
            .Upstream {
                background-image: url(lib/pacp/images/arrow-up-red.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                color: red;
                display: block;
            }
            
            .Downstream {
                color: blue;
                background-image: url(lib/pacp/images/arrow-down.gif);
                background-repeat: no-repeat;
                text-indent: 16px;
                width: 16px;
                height: 16px;
                display: block;
            }
            
            #header .api-title {
                color: white;
                font-family: tahoma, arial, sans-serif;
                font-size: 16px;
                font-size-adjust: none;
                font-stretch: normal;
                font-style: normal;
                font-variant: normal;
                font-weight: normal;
                line-height: normal;
                margin: 5px;
            }
            
            #header {
                background: #1E4176 url(hd-bg.gif) repeat-x scroll 0 0;
                border: 0 none;
                padding-left: 3px;
                padding-top: 3px;
            }
            
            .run-summary p {
                font-weight: 900;
                /*                font-size: 80%;
                 */
            }
            
            .run-summary .right {
                float: right;
                /*
                 font-size: 70%;
                 */
            }
            }
            
            .run-summary .comment {
                font-size: 80%;
                font-style: italic;
                color: #5C5858;
            }
            
            button.icon-map {
                background-image: url(lib/pacp/images/map.gif);
            }
            
            button.icon-help {
                background-image: url(lib/pacp/images/icon-question.gif);
            }
            
            span.OK {
                font-size: large;
                color: green;
            }
            
            span.error {
                font-size: large;
                color: red;
            }
        </style>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    </head>
    <body>
        <div id="header">
            <div class="api-title">
                PACP Database Viewer
            </div>
        </div>
        <div id="multiselect">
        </div>
        <div id="itemselector" class="demo-ct">
        </div>
		Click the Button below to test the Query Form.
        <!-- Fields required for history management -->
        <form id="history-form" class="x-hidden">
            <input type="hidden" id="x-history-field" />
            <iframe id="x-history-frame">
            </iframe>
        </form>
    </body>
</html>
